<!-- html 模版模版快捷键 英文!-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML常用标签介绍</title>
</head>
<body>
  <!-- 注释：默认情况下，HTML 会自动地在块级元素前后添加一个额外的空行，比如段落、标题元素前后。-->
  <!-- 标题标签 h1~h6 块级元素 -->
  <h1 id="h1">h1一级标题</h1>
  <a name="label">标签</a>
  <h2>h2二级标题</h2>
  <h3>h3三级标题</h3>
  <h4>h4四级标题</h4>
  <h5>h5五级标题</h5>
  <h6>h6六级标题</h6>

  <!-- p段落标签 块级元素 -->
   <p>p标签  这是一个段落  这是一个段落
    这是一个段落
    这是一个段落
   </p>
   <!-- 注意在html代码中所有连续的空格或空行都会被算作一个空格 -->

  <!-- a链接标签 -->
  <a href="http://www.baidu.com">百度</a><br />
  <a href="http://www.baidu.com" target="_self">本页打开百度</a><br />
  <a href="http://www.baidu.com" target="_blank">新页打开百度</a><br />
  <a href="文本文档.txt" download>下载文档</a>
  <!-- <iframe src="文本文档.txt" style="display: none;" name="文本文档"></iframe> -->
  <!-- 1、行内标签 <a> <span> <input> <img> <ul><li>-->
  <!-- a标签是超链接标签，代码运行后可以点击a标签跳转到其他的网站
      href属性：跳转的地址
      target属性：跳转页面打开方式   _self：当前页面打开 _blank：新页面打开
      download：下载
  -->
  <!-- 只有一个标签的叫做单标签或者空元素标签如 br、hr 等，在单标签中不使用闭合的斜杠/也没问题，但是使用斜杠是更长远的保障 -->
  <br />

  <!-- img图片标签 -->
  <img src="01_img.png" alt="图片" width="300" height="150" name="img" title="工具提示：这是一张图片" border="1" usemap="#map1" />
  <br />
  <!-- img标签的usemap属性与map标签一起可以创建带有可供点击区域的图像地图。其中的每个区域都是一个超级链接。 -->
  <map name="map1">
    <area shape="rect" coords="0,0,100,100" href="http://www.baidu.com" target="_blank" alt="百度" border="1" />
    <area shape="circle" coords="150,150,50" href="http://www.baidu.com" target="_blank" alt="百度" border="1" />
    <area shape="poly" coords="200,200,250,250,300,300" href="http://www.baidu.com" target="_blank" alt="百度" border="1" />
    <!-- 定义和用法
      coords 属性规定图像映射中区域的坐标。
      coords 属性与 shape 属性 一起使用来指定区域的大小、形状和位置。
      其他属性和a标签一样
      提示：区域左上角的坐标为 0,0。
      注意：如果某个 area 标签中的坐标和其他区域发生了重叠，会优先采用最先出现的 area 标签。浏览器会忽略超过图像边界范围之外的坐标 -->
  </map>

  <!-- img标签是图片标签，代码运行后可以显示图片
      src属性：图片的地址 可以是相对路径也可以是绝对路径 相对路径：相对于当前文件的路径 绝对路径：完整的路径。 图片格式：png、jpg、gif等
      alt属性：图片无法显示时显示的文本
      width属性：图片的宽度
      height属性：图片的高度
      name属性：图片的名称
      title属性：鼠标悬停时显示的文本
      border属性：图片的边框
  -->
  <!-- 动图 -->
  <img src="https://www.w3school.com.cn/i/eg_cute.gif" alt="动图">
  <br />

  <ul>
  <!-- 文本格式化标签 -->
  <b>b 粗体文本</b>
  <br />
  <big>big 大字号</big>
  <br />
  <small>small 小字号</small>
  <br />
  <em>em 着重字体</em>
  <br />
  <i>i 斜字体</i>
  <br />
  <strong>strong 粗体文本</strong>
  <br />
  <sub>sub 下标</sub>
  <br />
  <sup>sup 上标</sup>
  <br />
  <ins>ins 插入文本</ins>
  <br />
  <del>del 删除文本</del>
  <br />
  <!-- 计算机输出标签 -->
  <code>code 代码</code>
  <br /> 
  <kbd>kbd 键盘码</kbd>
  <br /> 
  <samp>samp 代码样本</samp>
  <br /> 
  <var>var 变量</var>
  <br /> 
  <pre>pre 预格式化文本</pre>
  <br />
  <!-- 引用和术语定义标签 -->
  abbr 标签定义缩写 <abbr title="Dear">Dr.</abbr>
  <br />
  <!-- acronym 在h5中不支持 -->
  acronym 标签定义首字母缩写 <abbr title="World Health Organization">WHO</abbr> 是世界卫生组织。
  <br />
  <address>地址标签：元素中的文本通常以斜体呈现，浏览器总是会在 address 元素前后添加一个换行符</address>
  <br />
  <bdo dir="rtl">bdo 标签覆盖当前的文本方向 dir="rtl"：从右到左 dir="ltr"：从左到右</bdo>
  <br />
  <blockquote>这是长引用标签，浏览器会插入换行和外边距</blockquote>
  <br />
  <q>这是短引用标签，该标签自动在外面加上双引号</q>
  <br />
  <cite>定义引用、引证</cite>
  <br />
  <dfn>定义一个定义项目</dfn>
  <!-- 内容样式标签 会让浏览器它所包含的文本具有特定的含义、上下文或者用法。然后浏览器就会把与该含义、上下文或者用法一致的格式应用在文本上
       这些标签有 abbr acronym cite code dfn em kbd samp strong var 
  -->
  <!-- 物理样式标签 在某些情况下，可能是出于合法性或者版权等方面的原因的考虑，你希望文本以某种特殊的方式来显示（例如斜体或加粗）。在这种情况下可以使用，
   包括粗体（b）、斜体（i）、删除线（strike）、放大（big）、缩小（small）、上标（sup）、下标（sub）文本 电传打字文本【h5中不再支持】（tt）等标签
  -->
   <a href="#label">回到标签</a>

  <!-- 列表 -->
  <!-- 无序列表 -->
  <!-- 无序列表的类型type有3种 disc圆点 circle圆圈 square方块 -->
  <!-- 列表中也可以嵌套列表 -->
  <ul>
    <li>列表项1</li>
    <li>列表项2
      <ul>
        <li>嵌套列表2_1</li>
        <li>嵌套列表2_2</li>
      </ul>
    </li>
    <li>列表项3</li>
  </ul>
  <!-- 有序列表 -->
  <!-- 有序列表的类型type有4种 默认数字 A字母 a小写字母 I罗马字母 i小写罗马字母 -->
  <ol>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
  </ol>
  <!-- 自定义列表 -->
  <dl>
    <dt>列表项1</dt>
    <dd>列表项1的描述</dd>
    <dt>列表项2</dt>
    <dd>列表项2的描述</dd>
    <dt>列表项3</dt>
    <dd>列表项3的描述</dd>
  </dl>
</body>
</html>